@if (loading) {
<app-spinner />
}

<div class="row mb-3">
  <div class="col-6">
    <h3 class="primary-text m-0">{{ 'menu.label_plugins' | translate }}</h3>
  </div>
  <div class="col-6 text-end">
    @if (isAdmin) {
    <button
      type="button"
      class="btn btn-elegant my-0 me-2"
      (click)="showSearch()"
      container="body"
      placement="bottom"
      [openDelay]="150"
      triggers="hover"
      [ngbTooltip]="'form.search' | translate"
      [hidden]="!installedPlugins.length && !showSearchBar"
      [attr.aria-label]="'form.search' | translate"
    >
      <i class="fas{{ showSearchBar ? ' primary-text' : '' }} fa-search"></i>
    </button>
    <button
      type="button"
      class="btn btn-elegant my-0 me-2 d-none d-md-inline-block"
      (click)="showStats()"
      container="body"
      placement="bottom"
      [openDelay]="150"
      triggers="hover"
      [ngbTooltip]="'plugins.stats' | translate"
      [attr.aria-label]="'plugins.stats' | translate"
    >
      <i class="fas{{ tab === 'stats' ? ' primary-text' : '' }} fa-sliders"></i>
    </button>
    }
    <button
      type="button"
      class="btn btn-elegant my-0 me-0"
      (click)="openSupport()"
      [attr.aria-label]="'support.title' | translate"
    >
      <i class="fa fa-question-circle-o"></i>
    </button>
  </div>
</div>

@if (tab === 'main') { @if (showSearchBar) {
<div class="row">
  <div class="col-md-12">
    <form novalidate (ngSubmit)="onSubmit(form)" [formGroup]="form">
      <input
        type="text"
        class="search-bar"
        #searchInput
        [placeholder]="'plugins.placeholder_search_plugin' | translate"
        formControlName="query"
      />
      @if (showExitButton) {
      <a class="search-bar-clear" href="javascript:void(0)" (click)="onClearSearch()">
        <i class="fas fa-square-xmark"></i>
      </a>
      }
    </form>
  </div>
</div>
} @if (!loading) {
<div class="d-flex flex-wrap justify-content-between">
  @for (plugin of installedPlugins; track plugin) {
  <div class="hb-plugin-space-between">
    <app-plugin-card [plugin]="plugin" [childBridges]="getPluginChildBridges(plugin)" />
  </div>
  } @if (installedPlugins.length === 0 && !loading && !mainError) {
  <div class="alert alert-info mt-4 text-center w-100">
    <i
      class="fas primary-text my-3"
      style="font-size: 75px"
      [ngClass]="{
        'fa-magnifying-glass': !showExitButton,
        'fa-exclamation-circle': showExitButton,
      }"
    ></i>
    <p>{{ (showExitButton ? 'plugins.placeholder_search_none' : 'plugins.placeholder_search_first') | translate }}</p>
  </div>
  }
</div>
} } @else if (tab === 'stats') {
<div class="w-100 py-3 hb-stats-header text-white text-center">
  <div class="mb-2">
    <code
      >https://developers.homebridge.io/analytics
      <a href="https://developers.homebridge.io/analytics" target="_blank"><i class="fa fa-external-link"></i></a
    ></code>
  </div>
  <div class="small grey-text">{{ 'plugins.stats_note' | translate }}</div>
</div>
<iframe
  src="https://developers.homebridge.io/analytics/"
  class="hb-stats"
  sandbox="allow-scripts allow-same-origin allow-popups"
  referrerpolicy="no-referrer"
>
</iframe>
}
